<template>
  <div class="vue-seamless-scroll-pro">
    <div
      class="vue-seamless-scroll-wrap"
      @mouseover="handleMouseOver()"
      @mouseout="handleMouseOut()"
      v-show="isShow"
    >
      <vue-seamless-scroll :data="data" :class-option="classOption">
        <slot></slot>
      </vue-seamless-scroll>
    </div>

    <div
      class="scrollbar-wrap"
      @mouseout="handleMouseOut()"
      @mouseover="handleMouseOver()"
      v-show="!isShow"
    >
      <slot></slot>
    </div>
  </div>
</template>
<script>
// 在 vueSeamlessScroll 的基础上新增了滑动滚动条
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  components: {
    vueSeamlessScroll,
  },
  props: {
    data: {
      type: Array,
      default: [],
    },
    classOption: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      isShow: true,
    };
  },
  methods: {
    handleMouseOver() {
      this.isShow = false;
    },
    handleMouseOut() {
      this.isShow = true;
    },
  },
  mounted() {},
};
</script>
<style scoped lang='scss'>
.vue-seamless-scroll-pro {
  width: 100%;
  height: 100%;
  .vue-seamless-scroll-wrap {
    width: 100%;
    height: 100%;
  }

  .scrollbar-wrap {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
  }

  /* 设置滚动条样式 */
  ::-webkit-scrollbar {
    width: 4px; /* 设置滚动条宽度 */
  }

  ::-webkit-scrollbar-thumb {
    background: #ccc; // 滑块颜色
    border-radius: 6px; /* 设置滚动条滑块圆角 */
  }
}
</style>
